<html>
<head>
<meta charset="UTF-8">
<title>starting page</title>
<link id="easyuiTheme" rel="stylesheet" type="text/css"
	href="jslib/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="jslib/easyui/themes/icon.css" />
<script type="text/javascript" src="jslib/easyui/jquery.min.js"></script>
<script type="text/javascript" src="jslib/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="jslib/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
		/*树形菜单点击处理*/
		$("#tree").tree({
			url : 'treeData.json',
			lines : true,
			onClick : function(node) {
				if (node.attributes) {
					openTab(node.text, node.attributes.url);
				}
			}
		});
		/*在右边center区域打开菜单，新增tab*/
		function openTab(title, url) {
			//判断是否已存在
			if ($("#tabs").tabs('exists', title)) {
				$('#tabs').tabs('select', title);
			} else {
				//新增tab
				$('#tabs').tabs('add', {
					title : title,
					closable : true,
					content : createTabContent(url)
				});
			}
		}

		/* 生成tab内容 */
		function createTabContent(url) {
			return '<iframe style="width:100%;height:98%;" scrolling="auto" frameborder="0" src="'
					+ url + '"></iframe>';
		}

		/*绑定tabs的右键菜单*/
		$("#tabs").tabs({
			onContextMenu : function(e, title) {
				e.preventDefault();
				$('#tabsMenu').menu('show', {
					left : e.pageX,
					top : e.pageY
				}).data("tabTitle", title);
			}
		});
		/*实例化menu的onClick事件*/
		$("#tabsMenu").menu({
			onClick : function(item) {
				CloseTab(this, item.name);
			}
		});
		/*右键菜单关闭事件的处理*/
		function CloseTab(curTab, itemName) {
			//选中的tab的title
			var curTabTitle = $(curTab).data("tabTitle");
			//所有tab
			var allTabs = $("#tabs").tabs("tabs");
			//所有tab的title的数组
			var allTabsTitle = [];
			//关闭菜单
			if (itemName === "close") {
				$("#tabs").tabs("close", curTabTitle);
				return;
			}
			//遍历所有tab
			$.each(allTabs, function() {
				var optTab = $(this).panel("options");
				//关闭其他条件：(1)tab可关闭；(2)选中的不关闭；(3)菜单名为closeother
				if (optTab.closable && optTab.title != curTabTitle
						&& itemName === "closeother") {
					//往tab的title数组中添加title
					allTabsTitle.push(optTab.title);
					//关闭所有
				} else if (optTab.closable && itemName === "closeall") {
					allTabsTitle.push(optTab.title);
				}
			});
			//for循环逐个关闭
			for (var i = 0; i < allTabsTitle.length; i++) {
				$("#tabs").tabs("close", allTabsTitle[i]);
			}
		}
		/*切换主题*/
		changeTheme = function(themeName) {
			var $easyuiTheme = $('#easyuiTheme');
			var url = $easyuiTheme.attr('href');
			var href = url.substring(0, url.indexOf('themes')) + 'themes/'
					+ themeName + '/easyui.css';
			$easyuiTheme.attr('href', href);
			var $iframe = $('iframe');
			if ($iframe.length > 0) {
				for (var i = 0; i < $iframe.length; i++) {
					var ifr = $iframe[i];
					$(ifr).contents().find('#easyuiTheme').attr('href', href);
				}
			}
		};
	});
</script>
</head>
<body class="easyui-layout">
	<div id="head" data-options="region:'north'" style="height: 60px;">
		<div style="height: 30px; font-size: 40px;text-align:center;">服装销售店POS系统（XFourPOS）</div>
		<div style="text-align: right;">
			<a href="javascript:void(0);" class="easyui-menubutton"
				data-options="menu:'#theme',iconCls:'icon-filter'">主题</a>
		</div>
		<div id="theme" style="width: 100px; display: none;">
			<div onclick="changeTheme('default');">浅蓝</div>
			<div onclick="changeTheme('gray');">灰色</div>
			<div onclick="changeTheme('black');">黑色</div>
			<div onclick="changeTheme('metro');">Metro</div>
			<div onclick="changeTheme('bootstrap');">Bootstrap</div>
		</div>
	</div>
	<div id="nav" data-options="region:'west',split:true"
		style="width: 200px" title="导航">
		<div id="navMenu" class="easyui-accordion"
			data-options="fit:true,border:false">
			<div title="系统管理" data-options="iconCls:'icon-save'"
				style="overflow: auto; padding: 10px;"></div>
			<div title="基础数据" data-options="iconCls:'icon-reload',selected:true"
				style="padding: 10px;">
				<ul id="tree" data-options="lines:true"></ul>
			</div>
		</div>
	</div>
	<div id="mainPanle" data-options="region:'center'">
		<div id="tabs" class="easyui-tabs"
			data-options="fit:true, border: false">
			<div title="About" data-options="iconCls:'icon-tip'">
				<iframe src="about.html"
					style="border: 0; width: 100%; height: 98%;" frameBorder="0"></iframe>
			</div>
		</div>
	</div>
	<div id="foot" data-options="region:'south'"
		style="height: 30px; text-align: center; background: #D2E0F2">CopyRight:SCAU</div>
	<!-- 右键菜单 -->
	<div id="tabsMenu" style="width: 150px;">
		<div data-options="name:'close'">关闭</div>
		<div data-options="name:'closeall'">全部关闭</div>
		<div data-options="name:'closeother'">关闭其它</div>
	</div>
</body>
</html>